import React from 'react';
import { 
  Text, 
  StyleSheet, 
  TextStyle, 
  StyleProp, 
  TextProps 
} from 'react-native';
import { fontScale, Sizes } from '../utils/ResponsiveUI';

interface ResponsiveTextProps extends TextProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  size?: number;
  variant?: 'tiny' | 'small' | 'regular' | 'medium' | 'large' | 'xl' | 'xxl';
  weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  color?: string;
  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
  numberOfLines?: number;
  adjustsFontSizeToFit?: boolean;
}

/**
 * 响应式文本组件 - 自动适配不同设备的字体大小
 */
const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  children,
  style,
  size,
  variant = 'regular',
  weight,
  color,
  align,
  numberOfLines,
  adjustsFontSizeToFit,
  ...rest
}) => {
  // 计算字体大小
  const getFontSize = () => {
    if (size) {
      return fontScale(size);
    }
    
    switch (variant) {
      case 'tiny': return Sizes.fontTiny;
      case 'small': return Sizes.fontSmall;
      case 'regular': return Sizes.fontRegular;
      case 'medium': return Sizes.fontMedium;
      case 'large': return Sizes.fontLarge;
      case 'xl': return Sizes.fontXL;
      case 'xxl': return Sizes.fontXXL;
      default: return Sizes.fontRegular;
    }
  };

  // 合并样式
  const textStyles = [
    styles.text,
    {
      fontSize: getFontSize(),
      ...(weight && { fontWeight: weight }),
      ...(color && { color }),
      ...(align && { textAlign: align })
    },
    style
  ];

  return (
    <Text 
      style={textStyles} 
      numberOfLines={numberOfLines}
      adjustsFontSizeToFit={adjustsFontSizeToFit}
      {...rest}
    >
      {children}
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    color: '#333333',
  },
});

export default ResponsiveText; 